<template>
  <page>
    <view class="friend-info">
      <scroll-view class="t-index-address__scroll-view"
                   :scroll-into-view="scrollview"
                   :scroll-y="true"
                   :enable-flex="true">
        <view class="friend-tool">
          <view class="item" @click="onNewFriend">
            <view class="pic">
              <fui-avatar src="/static/images/icon/tjhy_icon.png" width="70" height="70" shape="square"></fui-avatar>
            </view>
            <view class="title">
              <text>新的朋友</text>
            </view>
          </view>
          <view class="item" @click="onFirendNotice">
            <view class="pic">
              <fui-avatar src="/static/images/icon/hxtx_icon.png" width="70" height="70" shape="square"></fui-avatar>
            </view>
            <view class="title">
              <text>好友通知</text>
            </view>
            <view class="tag" v-if="msgCount > 0">
              <text>{{msgCount}}</text>
            </view>
          </view>
        </view>
        <view :id="group.letter" v-for="group in friendList" :key="group.letter">
          <view class="t-index-address__anchor">
            <text>{{ group.letter==='_'?'*':group.letter }}</text>
          </view>
          <view class="t-index-address__list">
            <view class="t-index-address__cell" v-for="(value, index) in group.data"
                  @click="onFriendItem(value)"
                  :key="index">
              <view class="friend-item">
                <view class="pic">
                  <fui-avatar :src="value.avatar_pic" width="70" height="70" shape="square"></fui-avatar>
                </view>
                <view class="nickname">
                  <text>{{value.nickname}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <empty icon="/static/images/empty/empty_zwhy.png" hint="暂无好友，快去添加朋友吧！" v-show="friendList.length === 0"></empty>
      </scroll-view>
      <view class="t-index-address__sidebar"
            @touchstart.stop.prevent="onTouchStart"
            @touchmove.stop.prevent="onTouchMove"
            @touchend.stop.prevent="onTouchStop"
            @touchcancel.stop.prevent="onTouchStop">
        <view class="t-index-address__index" v-for="group in friendList"
              :id="'index_'+group.letter"
              :key="group.letter">
          <text :class="{'active':activeIndex===group.letter}">{{ group.letter==='_'?'*':group.letter }}</text>
        </view>
      </view>
      <view class="t-index-address__alert" v-if="touchmove">
        <text>{{ activeIndex==='_'?'*':activeIndex }}</text>
      </view>
    </view>
    <tab-bar selectStr="通讯录"></tab-bar>
  </page>
</template>

<script setup>
import TabBar from "../../components/TabBar/TabBar";
import {getCurrentInstance, nextTick, onMounted, ref, watch} from "vue";
import {friendNoticeMsg, getFriendList} from "../../api/api";
import {onShow} from "@dcloudio/uni-app";
import Empty from "../../components/empty/empty.vue";
import {useStore} from "vuex";



const { proxy } = getCurrentInstance();
const store = useStore();
const scrollview = ref('A');
const activeIndex = ref('');
const touchmove = ref(false);
// 索引节点信息
const initialArr = ref([]);
// 是否在滑动
const initialMove = ref(false);

const friendList = ref([]);
// 好友申请消息数量
const msgCount = ref(0);

// 节点信息查询
let query = null;
onMounted(() =>{
  query = uni.createSelectorQuery().in(proxy);
})
onShow(() =>{
  getData();
  if(proxy.$global.user_id){
    getMsgData();
  }
})
function getData(){
  proxy.$way.showLoading();
  getFriendList({
  }).then(res =>{
    proxy.$way.hideLoading();
    friendList.value = res.data;
    initIndex();
  }).catch(err =>{
    proxy.$way.hideLoading();
  })
}

/**
 * 好友申请消息数据获取
 */
function getMsgData(){
  friendNoticeMsg({

  }).then(res =>{
    msgCount.value = res.data.count;
    store.commit('setCountFriendMsg',res.data.count);
  })
}
/**
 * 初始化索引
 */
function initIndex(){
  for (let i = 0; i < friendList.value.length; i++) {
    let item = friendList.value[i];
    nextTick(() =>{
      query.select(`#index_${item.letter}`).boundingClientRect(data => {
        initialArr.value.push({
          letter: item.letter,
          id: data.id,
          top: data.top,
          bottom: data.bottom,
        })
      }).exec();
    })
  }
}
/**
 * 索引触摸开始
 * @param e
 */
function onTouchStart(e){
  console.log(e);
  let clientY = e.changedTouches[0].clientY;
  if(!initialMove.value){
    let initialIndex = initialArr.value.findIndex((item) =>{
      return clientY >= item.top && clientY <= item.bottom;
    })
    if(initialIndex !== -1){
      activeIndex.value = initialArr.value[initialIndex].letter;
      touchmove.value = true;
    }
  }
}

/**
 * 索引触摸结束
 * @param e
 */
function onTouchMove(e) {
  // console.log(e);
  let clientY = e.changedTouches[0].clientY;
  let initialIndex = initialArr.value.findIndex((item) =>{
    return clientY >= item.top && clientY <= item.bottom;
  })
  initialMove.value = true;
  if(initialIndex !== -1){
    activeIndex.value = initialArr.value[initialIndex].letter;
    touchmove.value = true;
  }
}

/**
 * 索引触摸结束
 */
function onTouchStop() {
  activeIndex.value = '';
  initialMove.value = false;
  touchmove.value = false;
}

/**
 * 好友点击
 * @param item
 */
function onFriendItem(item){
  console.log(item);
  uni.navigateTo({
    url: `/pages/FriendInfo/FriendInfo?pid=${item.pid}`
  })
}

/**
 * 新的朋友点击
 */
function onNewFriend(){
  uni.navigateTo({
    url: '/pages/NewFriend/NewFriend'
  })
}

/**
 * 好友通知点击
 */
function onFirendNotice(){
  uni.navigateTo({
    url: '/pages/FirendNotice/FirendNotice'
  })
}
watch(
    () => activeIndex.value,
    (newVal) =>{
      scrollview.value = newVal;
    }
)
</script>

<style lang="scss">
  @import "AddressBook.scss";
</style>
